
<table style="border: 0px; width: 100%; height: 100%; overflow: hidden;">
	<tr style="height: 100%; width: 100%;">
		<td style="width: 350px;">
			<div style="width: 349px; height: 100%;">
				<table id="selectRooms">

				</table>
			</div>
		</td>
		<td style="width: 10%; text-align: center;">
			<input type="button" value=">" style="width: 40px;" onclick="leftToRightRoom()" />
			   
			<input type="button" value="<" style="width: 40px;margin-top: 15px;" onclick="rightToLeftRoom()" />

		</td>
		<td style="width: 350px;">
			<div style="width: 349px; height: 100%;">
				<table id="unSelectRooms">

				</table>
			</div>
		</td>

	</tr>
</table>
<script type="text/javascript">
		$("#selectRooms").datagrid(
				{
					title :"已选房间",
					fit:true,
					autoRowHeight:true,
					fitColumns:true,
					loadMsg:'加载中,请稍候...',
					checkbox:true,
					url:"room.do?loadCardSelectRooms&cardId="+${cardId},
					columns:[[
							  {field:'id',checkbox:true},
					          {field:'roomNo',title:'房间号'},
					          {field:'type',title:'房间类型',width:100}
					      ]],
					tools:[{iconCls:'icon-save',handler:function(){saveSelectRoles();}}],
					
				}
		);
		//保存已选的角色
		function saveSelectRooms() {
			var item = $('#selectRooms').datagrid('getRows');
			jmaxAjax('card.do?saveCardToRooms&cardId='+${cardId},{data:JSON.stringify(item)});
		}
		
		$("#unSelectRooms").datagrid(
				{
					title :"未选房间",
					fit:true,
					fitColumns:true,
					autoRowHeight:true,
					loadMsg:'加载中,请稍候...',
					url:"room.do?loadCardUnSelectRooms&cardId="+${cardId},
					columns:[[
					          {field:'id',checkbox:true},
					          {field:'roomNo',title:'房间号'},
					          {field:'type',title:'房间类型',width:100}
					      ]]
				}
		);
	//未选->已选
	function rightToLeftRoom(){
		var item = $('#unSelectRooms').datagrid("getSelections");
		console.log(item);
		var removeRows = item.slice(0); 
        if (item) {
            for (var i = item.length - 1; i >= 0; i--) {
                var index = $('#unSelectRooms').datagrid('getRowIndex', item[i]);
                $('#unSelectRooms').datagrid('deleteRow', index);
                console.log(item.length);
            }
			console.log(removeRows);
            for (var j=0;j<removeRows.length;j++) {
            	
            	console.log(JSON.stringify(removeRows[j]));
            	var temp = JSON.stringify(removeRows[j]);
            	$('#selectRooms').datagrid('appendRow',eval(removeRows[j]));
            	console.log(eval(removeRows[j]));
            }
        }
	}
	//已选->未选
	function leftToRightRoom(){
		var item = $('#selectRooms').datagrid("getSelections");
		console.log(item);
		var removeRows = item.slice(0); 
        if (item) {
            for (var i = item.length - 1; i >= 0; i--) {
                var index = $('#selectRooms').datagrid('getRowIndex', item[i]);
                $('#selectRooms').datagrid('deleteRow', index);
                console.log(item.length);
            }
			console.log(removeRows);
            for (var j=0;j<removeRows.length;j++) {
            	
            	console.log(JSON.stringify(removeRows[j]));
            	var temp = JSON.stringify(removeRows[j]);
            	$('#unSelectRooms').datagrid('appendRow',eval(removeRows[j]));
            	console.log(eval(removeRows[j]));
            }
        }
	}
</script>


